<?php 
if (false) {
?>
<div id="hoanbn-demo">
		<?php 
		foreach ($basic_short_elements_setting as $key => $group_short_element) {
			foreach ($group_short_element['elements'] as $element_key => $short_element) {
		?>
		<div class="nino-elementDragAble">
			<span class="nino-wrapText">
				<span class="fa <?php echo $short_element['icon']; ?>"><?php echo isset($short_element['icon-text']) ? $short_element['icon-text'] : "" ?></span> 
				<?php echo $short_element['text']?>
			</span>
			<?php echo contact_elements_render($element_key); ?>
		</div>
		<hr />												
		<?php
			}
		} 
		?>
</div>
<hr />
<?php } ?>

<!-- Sample Form Layout Demo -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-grid-layout-1">
			<div class="nino-grid-col" style="background: #DDDDDD;">
				<h4>form header</h4>
			</div>
		</div>
		<div class="nino-grid-layout-3">
			<div class="nino-grid-col" style="background: #AAAAAA; height: 250px;">col 1</div>
			<div class="nino-grid-col" style="background: #CCCCCC; height: 250px;">col 2</div>
			<div class="nino-grid-col" style="background: #CCCCCC;">
				<div class="nino-grid-layout-1">
					<div class="nino-grid-col" style="background: #AAAAAA;">col 1</div>
				</div>
				<div class="nino-grid-layout-2">
					<div class="nino-grid-col" style="background: #AAAAAA; height: 166px;">col 1</div>
					<div class="nino-grid-col" style="background: #AAAAAA; height: 166px;">col 2</div>
				</div>
			</div>
		</div>
	</div>
</div>
<hr />

<!-- Grid system -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">col 1</div>
</div>
<div class="nino-grid-layout-2">
	<div class="nino-grid-col">col 1</div>
	<div class="nino-grid-col">col 2</div>
</div>
<div class="nino-grid-layout-3">
	<div class="nino-grid-col">col 1</div>
	<div class="nino-grid-col">col 2</div>
	<div class="nino-grid-col">col 3</div>
</div>
<div class="nino-grid-layout-4">
	<div class="nino-grid-col">col 1</div>
	<div class="nino-grid-col">col 2</div>
	<div class="nino-grid-col">col 3</div>
	<div class="nino-grid-col">col 4</div>
</div>
<div class="nino-grid-layout-5">
	<div class="nino-grid-col">col 1</div>
	<div class="nino-grid-col">col 2</div>
	<div class="nino-grid-col">col 3</div>
	<div class="nino-grid-col">col 4</div>
	<div class="nino-grid-col">col 4</div>
</div>

<!-- input / select box -->
<div class="nino-grid-layout-2">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-input-icon nino-label-icon nino-icon-right nino-required nino-error">
			<label for="nino-input-name">
				<span class="nino-labelName"><span class="nino-icon fa fa-user"></span>Input Label</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input">
					<span class="nino-icon fa fa-user"></span>
					<input type="text" id="nino-input-name" placeholder="enter your name" />									
				</div>
				<p class="nino-error-message">This is a required field.</p>
			</div>							
		</div>
		<div class="nino-formGroup nino-input-icon nino-label-icon nino-icon-right nino-required nino-error">
			<label for="nino-input-name">
				<span class="nino-labelName"><span class="nino-icon fa fa-user"></span>Input Label</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input">
					<span class="nino-icon fa fa-user"></span>
					<input type="text" id="nino-input-name" placeholder="enter your name" />									
				</div>
				<p class="nino-error-message">This is a required field.</p>
			</div>							
		</div>
	</div>
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-input-icon nino-icon-right nino-required nino-error">
			<label for="nino-input-name">
				<span class="nino-labelName">Select box</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input nino-select-box-style">
					<select>
						<option>Option 1</option>
						<option>Option 2</option>
						<option>Option 3</option>
					</select>
					<i></i>
				</div>
				<p class="nino-error-message">This is a required field.</p>
			</div>
		</div>
	</div>
</div>

<!-- textarea -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-input-icon nino-label-icon nino-required nino-error">
			<label for="nino-textarea-name">
				<span class="nino-labelName"><span class="nino-icon fa fa-comment"></span>Textarea Label</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input">
					<span class="nino-icon fa fa-comment"></span>
					<textarea id="nino-textarea-name" placeholder="enter your message"></textarea>									
				</div>
				<p class="nino-error-message">This is a required field.</p>
			</div>
		</div>
	</div>
</div>

<!-- checkbox / radio -->
<div class="nino-grid-layout-2">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-label-icon nino-required nino-error">
			<label>
				<span class="nino-labelName"><span class="nino-icon fa fa-comment"></span>Checkbox style</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input">
					<ul class="nino-input-style">
						<li>
							<input id="nino-checkbox-name" name="nino-checkbox-group" type="checkbox" checked="checked" />
							<label for="nino-checkbox-name">Checkbox 1</label>
						</li>
						<li>
							<input id="nino-checkbox-name-1" name="nino-checkbox-group" type="checkbox" />
							<label for="nino-checkbox-name-1">Checkbox 2</label>
						</li>
						<li>
							<input id="nino-checkbox-name-2" name="nino-checkbox-group" type="checkbox" />
							<label for="nino-checkbox-name-2">Checkbox 3</label>
						</li>
					</ul>
				</div>
				<p class="nino-error-message">This is a required field.</p>
			</div>
		</div>
	</div>
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-label-icon nino-required nino-error">
			<label>
				<span class="nino-labelName"><span class="nino-icon fa fa-comment"></span>Radio style</span>
				<span class="nino-asterisk">*</span>
				<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
			</label>
			<div class="nino-input-wrap">
				<div class="nino-input">
					<ul class="nino-input-style">
						<li>
							<input id="nino-radio-name" name="nino-radio-group" type="radio" />
							<label for="nino-radio-name">Radio 1</label>
						</li>
						<li>
							<input id="nino-radio-name-1" name="nino-radio-group" type="radio" />
							<label for="nino-radio-name-1">Radio 2</label>
						</li>
						<li>
							<input id="nino-radio-name-2" name="nino-radio-group" type="radio" />
							<label for="nino-radio-name-2">Radio 3</label>
						</li>
					</ul>
				</div>							
				<p class="nino-error-message">This is a required field.</p>
			</div>
		</div>
	</div>
</div>

<!-- captcha -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-input-icon nino-label-icon nino-required nino-error nino-horizontal">
			<div class="nino-captcha-image"></div>
			<div class="nino-captcha-result">
				<label for="nino-input-captcha">
					<span class="nino-labelName"><span class="nino-icon fa fa-user"></span>Enter Code</span>
					<span class="nino-asterisk">*</span>
					<span class="nino-subLabel">Lorem ipsum dolor sit amet, consectetur</span>
				</label>
				<div class="nino-input-wrap">
					<div class="nino-input">
						<span class="nino-icon fa fa-user"></span>
						<input type="text" id="nino-input-captcha" placeholder="enter your name" />
						<span class="nino-captcha-refresh fa fa-refresh"></span>
					</div>
					<p class="nino-error-message">This is a required field.</p>
				</div>
			</div>
		</div>						
	</div>
</div>

<!-- heading -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-heading-icon">
			<h1 class="nino-heading"><span class="nino-icon fa fa-home"></span> This is heading 1</h1>
		</div>
		<div class="nino-formGroup nino-heading-icon">
			<h2 class="nino-heading">This is heading 2</h2>
		</div>
		<div class="nino-formGroup nino-heading-icon">
			<h3 class="nino-heading">This is heading 3</h3>
		</div>
		<div class="nino-formGroup nino-heading-icon">
			<h4 class="nino-heading">This is heading 4</h4>
		</div>
		<div class="nino-formGroup nino-heading-icon">
			<h5 class="nino-heading">This is heading 5</h5>
		</div>
		<div class="nino-formGroup nino-heading-icon">
			<h6 class="nino-heading">This is heading 6</h6>
		</div>
	</div>
</div>

<!-- paragraph -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup">
			<p class="nino-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
		</div>
	</div>
</div>

<!-- google map -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup">
			<div class="nino-map-iframe">
				
			</div>
		</div>
	</div>
</div>

<!-- devider -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup">
			<div class="nino-devider"></div>
		</div>
	</div>
</div>

<!-- social link -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup">
			<div class="nino-social-link nino-horizontal clearafter">
				<a href="#"><span class="fa fa-facebook-square"></span></a>
				<a href="#"><span class="fa fa-flickr"></span></a>
				<a href="#"><span class="fa fa-google-plus-square"></span></a>
				<a href="#"><span class="fa fa-instagram"></span></a>
				<a href="#"><span class="fa fa-linkedin"></span></a>
				<a href="#"><span class="fa fa-twitter"></span></a>
			</div>
		</div>
	</div>
</div>

<!-- submit button -->
<div class="nino-grid-layout-1">
	<div class="nino-grid-col">
		<div class="nino-formGroup nino-submit-icon">
			<button type="submit" class="nino-button-submit"><span class="nino-icon fa fa-send"></span>Submit Button</button>
		</div>
	</div>
</div>